参考サイト▶DOMとは何か？

セクション1

子ノード1

子ノード2

子ノード3

セクション2

子ノード1

子ノード2

子ノード3

----------------------------------------------------------------------------------------------
<body>
<section id="section-1">
   <h2>セクション1</h2>
     <p>子ノード1</p>
     <p>子ノード2</p>
     <p>子ノード3</p>
</section>
<section id="section-2">
   <h2>セクション2</h2>
     <p>子ノード1</p>
     <p>子ノード2</p>
     <p>子ノード3</p>
</section>

*
</body>
<script>＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾ジャバスクリプトのコード＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾

var baseElement = document.getElementById('section-2');

var section2node2 = baseElement.childNodes[5];

section2node2.innerHTML = '子ノード2はこれに、変更されました・・ほい';   // ここにJavaScriptコードを書いていく

document.getElementById('section-2').style.color = 'red';   // section-2のIDを赤い色にする...

</script>＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾ジャバスクリプトのコード＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾

</html>----------------------------------------------------------------------------------------------

子ノードを取得して、操作する↑

補足：baseElement.childNodes[5];は2番目のノードを取得したいのになぜ「5」なのか？
ChromeブラウザのchildNodesの実装が、ノードとノードの間に「空白のノード」を差し込むものになっているため、一見奇妙な配列の添え字になっている。
例えば、Chromeブラウザで1番目のノードを取得したい場合、添え字は「3」になる。

親ノードを取得して、操作する ↓ 

＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾ジャバスクリプトのコード＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾

var baseElement = document.getElementById('section-2');

var parentNode = baseElement.parentNode;

parentNode.removeChild(baseElement);

＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾ジャバスクリプトのコード＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾
親ノードを指定して、操作をしてみよう。
親ノードを指定するメソッドは以下のように定義されている。
var parentNode = elementNodeReference.parentNode
elementNodeReference ... 基準ノード
parentNode ... 基準ノードの親ノード
これを用いて「section-2」の親ノードを取得して、その親ノードの子ノード(つまりsectio-2)全てを削除(英　remove）してみよう。